<template>
	<div class="app-container">
		<div class="top-left">
			<div>
				{{userObj.nickName}}

			</div>
			<el-button type="danger" @click="(showChangePwd=true)">修改密码</el-button>

		</div>
		<div class="top-right">
			<el-button type="warning" @click="logout">退出登录</el-button>
			<el-button type="danger" @click="quitAppClick">退出应用</el-button>
		</div>
		<div class="bottom-right">
			<!-- <el-button type="danger"  @click="kuaisu">加入会议</el-button>
			<el-button type="danger"  @click="(huiyiList = true)">受邀会议</el-button> -->
			版本:V{{appPackageVersion}}
		</div>
		<!-- <div class="bottom-right">
			<el-button type="danger"  @click="(lishiList = true)">历史会议</el-button>
		</div> -->
		<div class="bottom-left">
			<!-- <el-button type="danger" @click="(huiyiList = true)">加入会议</el-button> -->
			<!-- <el-button type="danger" @click="(lishiList = true)">历史会议</el-button> -->
			<!-- <el-button type="danger" @click="(qfwj = true)">群发文件</el-button> -->
			<el-button type="danger" @click="goFileList">群发文件</el-button>
			<el-button type="danger" @click="(wjgg = true)">文件公告</el-button>
		</div>
		<h2>一平台四系统</h2>
		<div class="index-panel">
			<!-- <el-row :gutter="20">
				<el-col :span="14">
					<el-row :gutter="20">
						<el-col :span="8">
							<button class="btn-add" @click="kuaisu">快速会议</button>
						</el-col>
						<el-col :span="8">
							<button class="btn-add" @click="yuyue">预约会议</button>
						</el-col>
						<el-col :span="8">
							<button class="btn-add" @click="dxqf">短信群发</button>
						</el-col>
					</el-row>
				</el-col>
			</el-row> -->
			<!-- <div @click="(huiyiList = true)"><img src="../../assets/images/icon1.png" alt="">指挥系统</div> -->
			<!-- <div @click="yuyue(203)"><img src="../../assets/images/icon3.png" alt="">思想政治教育</div>
			<div @click="yuyue(201)"><img src="../../assets/images/icon4.png" alt="">民兵辅助系统</div>
			<div @click="yuyue(202)"><img src="../../assets/images/icon2.png" alt="">征兵辅助系统</div>
			<div @click="yuyue(209)"><img src="../../assets/images/icon1.png" alt="">指挥系统</div> -->
			<!-- <div @click="yuyue(201)"><img src="../../assets/images/icon3.png" alt="">民兵思想政治教育平台</div>
			<div @click="yuyue(201)"><img src="../../assets/images/icon4.png" alt="">民兵远程管理系统</div>
			<div @click="yuyue(202)"><img src="../../assets/images/icon2.png" alt="">廉洁征兵智能辅助系统</div>
			<div @click="yuyue(209)"><img src="../../assets/images/icon1.png" alt="">应急预警管理指挥系统</div>
  -->
			<div @click="yuyue(203,'民兵思想政治教育平台')">民兵思想政治</br>教育平台</div>
			<div @click="yuyue(201,'民兵远程管理系统')">民兵远程</br>管理系统</div>
			<div @click="yuyue(202,'征兵智能辅助系统')">征兵智能</br>辅助系统</div>
			<div>经常性法规文件</br>查询系统</div>
			<div @click="yuyue(209,'应急预警管理指挥系统')">应急预警管理</br>指挥系统</div>
		</div>
		<el-dialog title="会议列表" :visible.sync="huiyiList" width="70%" :before-close="handleClose">
			<div style="height:58vh;overflow-x: hidden;">
				<el-card class="box-card" v-for="(item, key) in meetingList" :key="key"
					style="margin-bottom: 20px;margin-right: 10px;">
					<el-row>
						<el-row>
							<el-col :span="12">
								<p>发起人：{{item.masterName}}</p>
							</el-col>
							<el-col :span="12">
								<p>{{item.beginTime}}</p>
							</el-col>
						</el-row>
						<el-col :span="24">会议标题：{{item.meetingName}}</el-col>
						<el-col :span="24">
							<el-button style="float: right; padding: 3px 0" type="text" @click="enterRoom(item)">进入会议
							</el-button>
						</el-col>
					</el-row>
				</el-card>
				<div v-if="meetingList.length == 0" style="text-align: center;">
					暂无会议
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(huiyiList = false)">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="历史会议" :visible.sync="lishiList" width="70%" :before-close="handleClose">
			<div style="height: 58vh;overflow-x: hidden;">
				<el-card class="box-card" v-for="(item,key) in hyList" :key="key" style="margin-bottom: 20px;">
					<!-- <div slot="header" class="clearfix">
						<span>
							<span class="quanxuan" :class="item.all?'all':''" v-show="showType"
								@click="itemAll(key)">全选</span>
							{{item.date}}
						</span>
						<span style="float: right; padding: 3px 0">{{item.new}}</span>
					</div> -->
					<el-row class="huiyi-box">
						<el-col :span="18" class="huiyi-info">
							<span>
								{{item.meetingName}}
							</span>
							<p>{{item.masterName}}</p>
							<span>{{item.beginTime}}</span>
						</el-col>
						<el-col :span="6" class="huiyi-detail">
							<div @click="goHyDetail(item)">
								详情>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(lishiList = false)">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改密码" :visible.sync="showChangePwd">
			<el-form ref="userPwdObj" :model="userPwdObj" label-width="80px">
				<el-form-item label="新密码" style="width: 50%;">
					<el-input v-model="userPwdObj.password" type="password" minlength=6 maxlength="16"
						placeholder="密码长度6-16"></el-input>
				</el-form-item>
				<el-form-item label="重复密码" style="width: 50%;">
					<el-input v-model="userPwdObj.password1" type="password" minlength=6 maxlength="16"
						placeholder="再次输入密码"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(showChangePwd = false)">取 消</el-button>
				<el-button type="primary" @click="doChangePwd">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="文件公告" :visible.sync="wjgg">
			<div class="file-list">
				<div v-for="(arrs,key) in myGroupFileList" :key="key" v-if="myGroupFileList.length > 0">
					<div v-for="(item,key) in arrs" :key="key" class="info">
						 <span> {{item.filename}}</span>
						<el-button type="primary" @click="doDownload(item.filepath)">下 载</el-button>
					</div>
				</div>
				<div v-else>暂无内容</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(wjgg = false)">取 消</el-button>
				<!-- <el-button type="primary" @click="doChangePwd">确 定</el-button> -->
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		ticket
	} from "@/api/trtc";
	import {
		resetUserPwd
	} from "@/api/system/user";
	import {
		listMeeting
	} from "@/api/system/meeting";
	import {
		listGroupfiles1
	} from "@/api/system/groupfiles1";
	import axios from 'axios'
	export default {
		data() {
			return {
				fileList: [],
				myGroupFileList: [],
				wjgg: false, //文件公告
				lishiList: false, //历史会议
				huiyiList: false, //会议列表
				all: false,
				showType: false,
				showChangePwd: false,
				meetingList: [], //可参加的会议
				hyList: [{
					date: "4月26日 周二",
					new: "2022年",
					list: [{
						id: "856 528 939",
						title: "鸿雁（大森林）预定会议",
						time: "入会时间：12:41 发起人：鸿雁（大森林）",
					}, ],
				}, ],
				sdkInfo: {},
				select: "",
				userPwdObj: {
					userId: -1,
					password: "",
					password1: ""
				}
			};
		},
		computed: {
			...mapGetters(["userId"]),
			...mapGetters(["userObj"]),
			...mapGetters(["userName"]),
		},
		created() {
			this.get_ticket();
			this.getMeetings();
			this.getMyGroupFileList()
		},
		methods: {
			doDownload(url){
				console.log('down load')
				console.log(url)
				this.$electron.ipcRenderer.send("downloadVideo",url)
			},
			getMyGroupFileList(){
				listGroupfiles1({userId:this.userId}).then( (res)=>{
					console.log(res)
					this.myGroupFileList = []
					const rows = res.rows
					let that = this
					rows.forEach(function(item){
						const filenames = item.filename.split(",")
						const filepaths = item.filepath.split(",")
						let len = filenames.length
						let tmp = []
						for(let i=0;i<len;i++){
							tmp.push({
								filename:filenames[i],
								filepath: process.env.VUE_APP_BASE_API+filepaths[i]
							})
						}
						that.myGroupFileList.push(tmp)
						console.log(that.myGroupFileList)
					})
					console.log(this.myGroupFileList)
				} )
			},
			doChangePwd() {
				console.log(this.userPwdObj)
				if (this.userPwdObj.password != this.userPwdObj.password1) {
					this.$message({
						message: "两次密码不一致",
						type: "warning",
					});
					return
				}
				let l = this.userPwdObj.password.length
				if (l < 6 || l > 16) {
					this.$message({
						message: "密码长度不符合要求",
						type: "warning",
					});
					return
				}
				resetUserPwd(this.userId, this.userPwdObj.password).then(res => {
					if (res.code == 200) {
						this.$message({
							message: "修改密码成功",
							type: "success",
						});
						this.showChangePwd = false
					} else {
						this.$message({
							message: "修改密码失败",
							type: "error",
						});
					}

				})

			},
			quitAppClick() {
				console.log('exit app')
				this.$electron.ipcRenderer.send("close-lj")
			},
			handleClose() {
				this.lishiList = false;
				this.huiyiList = false;
			},
			enterRoom(item) { 
				console.log(item.meetingRoomId)
				console.log(item)
				this.$router.push({
					path: "/rome",
					// name: "ConferenceRoom",
					query: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: item.meetingRoomId,
						meetingInfo: item,
					},
				});
			},
			deleteItem() {
				this.hyList.forEach((v, i) => {
					v.list.forEach((b, k) => {
						this.$set(this.hyList, i, v);
					});
				});
			},
			itemAll(k) {
				if (this.showType) {
					console.log(k);
					if (k != null) {
						this.hyList.forEach((v, i) => {
							if (k == i) {
								if (v.all) {
									v.all = false;
								} else {
									v.all = true;
								}
								v.list.forEach((b, k) => {
									if (v.all) {
										b.type = true;
									} else {
										b.type = false;
									}
									this.$set(this.hyList, i, v);
								});
							}
						});
					} else {
						if (this.listAll) {
							this.listAll = false;
						} else {
							this.listAll = true;
						}
						this.hyList.forEach((v, i) => {
							v.list.forEach((b, k) => {
								b.type = this.listAll;
								this.$set(this.hyList, i, v);
							});
						});
					}
				}
			},
			activeDelete(e) {
				this.hyList.forEach((v, i) => {
					v.list.forEach((b, k) => {
						if (b.id == e) {
							if (b.type) {
								b.type = false;
							} else {
								b.type = true;
							}
							this.$set(this.hyList, i, v);
						}
					});
				});
				console.log();
			},

			getMeetings() {
				let queryParams = {
					pageNum: 1,
					pageSize: 10,
					meetingMembers: this.userObj.phonenumber,
					status: 0,
				};
				listMeeting(queryParams).then((response) => {
					this.meetingList = response.rows;
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
				});
				queryParams.status = 1;
				listMeeting(queryParams).then((response) => {
					this.hyList = response.rows;
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
				});
			},
			goHyDetail(item) {
				this.$router.push({
					path: "/detail",
					query: {
						meetingInfo: item
					},
				});
			},
			allhuiyi(e) {
				console.log(e);
				this.all = true;
			},
			kuaisu() {
				this.$router.push({
					path: "/rome",
					// name: "ConferenceRoom",
					query: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: this.randomRoomNum(),
					},
				});
			},
			yuyue(e,name) {
				this.$router.push({
					path: "/dept",
					query: {
						dept: e,
						name
					},
				});
			},
			get_ticket() {
				//获取客户票据
				ticket({
					userId: this.userId,
				}).then((response) => {
					const {
						data
					} = response;
					this.sdkInfo = data;
				});
			},
			enter_room() {
				// this.test(this.userId)
				// this.$router.push({ path: '/trtc/room', query: { userId: this.userId }})
				this.$router.push({
					name: "Room",
					query: {},
					params: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: this.room_num,
					},
				});
			},
			randomRoomNum() {
				 
				return  Math.floor(Date.now() / 1000)
				// return Math.floor(Math.random() * 1000000).toString();
			},
			test(msg) {
				this.$alert(msg, {
					confirmButtonText: "确定",
					callback: (action) => {
						this.$message({
							type: "info",
							message: `action: ${action}`,
						});
					},
				});
			},
			dxqf() {
				this.$router.push({
					path: "/sendsms",
					query: "",
				});
			},
			goFileList() {
				this.$router.push({
					path: "/filePanel",
					query: "",
				});
			},
			async logout() {
				await this.$store.dispatch('user/logout')
				this.$router.push(`/login?redirect=${this.$route.fullPath}`)
			}
		},
	};
</script>
<style scoped>
	.app-container {
		height: 100vh;
	}

	.index-panel {
		padding: 10vh 10vw;
		display: flex;
		justify-content: space-between;
	}

	.index-panel>div {
		display: flex;
		flex-direction: column;
		width: 19%;
		text-align: center;
		height: 40vh;
		background-image: linear-gradient(to bottom, #ffda81, #fff9c6);
		padding: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		font-size: 30px;
		line-height: 50px;
		font-weight: bold;
		color: #f20000;
		white-space: nowrap;
	}

	.index-panel img {
		margin-bottom: 40px;
	}

	h2 {
		text-align: center;
		line-height: 120px;
		font-size: 56px;
		margin-top: 0;
		color: #ffef92;
	}

	label {
		line-height: 40px;
	}

	.btn-add {
		display: block;
		width: 100%;
		border-radius: 10px;
		border: none;
		height: 100px;
		color: #ffffff;
		background-color: #1678ff;
	}

	.huiyi-title {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.huiyi-list {
		height: calc(90vh - 166px);
		overflow-x: hidden;
	}

	.huiyi-box {
		display: flex;
		align-items: flex-end;
	}

	.huiyi-info span {
		color: #9f9f9f;
	}

	.huiyi-info p {
		font-weight: bold;
		font-size: 18px;
	}

	.huiyi-detail {
		height: 100%;
		text-align: right;
		cursor: pointer;
	}

	.huiyi-detail div {
		color: #999999;
	}

	.huiyi-detail div:hover {
		color: #1678ff;
	}

	.item {
		margin: 10px 0;
		padding: 10px;
	}

	.btn-box {
		margin-top: 20px;
	}

	.quanxuan {
		cursor: pointer;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: #eaeaea;
	}

	.active {
		background-color: #f0f8ff;
	}

	.all {
		background-color: #1678ff;
		color: #ffffff;
	}

	.top-left {
		display: flex;
		align-items: center;
	}

	.top-left>div {
		display: flex;
		align-items: center;
		padding: 0 15px;
		background-image: linear-gradient(to bottom, #ffda81, #fff9c6);
		border-radius: 5px;
		line-height: 36px;
		height: 36px;
		margin-right: 10px;
	}

	.top-left img {
		margin-left: 10px;
		width: 24px;
		height: 24px;
	}

	.top-right {
		position: fixed;
		right: 30px;
		top: 30px;
	}

	.bottom-left {
		position: fixed;
		left: 30px;
		bottom: 30px;
	}

	.bottom-right {
		position: fixed;
		right: 30px;
		bottom: 30px;
	}

	.file-list {
		height: 60vh;
		overflow-x: hidden;
	}

	.file-list .info{
		float: left;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 10px;
		width: calc(20% - 20px);
		border: 1px solid #cccccc;
		padding: 10px 20px;
		border-radius: 10px;
		height:140px;
	}
	.file-list span{
		text-align: left;
		display: flex;
		justify-content: center;
		margin: 10px 0;
		font-size: 17px;
		font-weight: bold;
	}
</style>
